<template>
  <div class="send-text" :class="{'color-active':isMine}">
    <template v-for="(item, index) in contentList">
      <span :key="index" v-if="item.name === 'text'" v-html="item.text"></span>
      <img v-else-if="item.name === 'img'" :src="item.src" width="20px" height="20px" :key="index"/>
    </template> 
  </div>
</template>

<script>
import { decodeText } from '../../../utils/decodeText'
export default {
  name: 'TextElement',
  props: {
    payload: {
      type: Object,
      required: true
    },
    message: {
      type: Object,
      required: true
    },
    isMine: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  computed: {
    contentList() {
      var contentList = decodeText(this.payload)
      for(let i=0;i<contentList.length;i++){
        if(contentList[i].name === 'text'){
          if(contentList[i].text.indexOf('\n')>=0){
            contentList[i].text = contentList[i].text.replace(/\n/g,'<br>')
          } 
        }
      }
      return contentList
    }
  }
}
</script>

<style lang="scss" scoped>    
  .send-text{
    width: 100%;
    font-size: .32rem;
    color: #3D3D3D;
    letter-spacing: 0;
    text-align: justify;
    line-height: .533333rem;
    word-wrap: break-word;
    word-break: break-all;
    &.color-active{
      color: $acolor;
    }
  } 
</style>
